<template>
   <div class="edit-form edit-dialog">
  <div v-loading="loading">
    <el-card shadow="never" style="height: 54px">
      <el-row style="margin-top: -7px">
        <el-col :span="3">
          <el-button
            type="primary"
            class="btn-form-save"
            :icon="Plus"
            @click="Save"
            v-prevent-repeat-click
          >
            确定
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="invoice-list">
      <!-- 表头的值,自己单独写的 -->
      <ul class="invoice-header" style="margin-top: 0px">
        <li class="invoice-item">菜单名称</li>
        <li class="invoice-item">菜单代码</li>
        <li class="invoice-item">路径</li>
        <li class="invoice-item">类型</li>
        <li class="invoice-item">状态</li>
      </ul>
      <el-tree
        :props="prop"
        :data="tableData"
        show-checkbox
        default-expand-all
        node-key="id"
        :style="{ height: scrollerHeight, overflow: 'auto' }"
        ref="treeDataRef"
        @check-change="handleCheckChange"
      >
        <!-- 使用自定义,需要加slot-scope,返回两个值,node是当前节点指定的对象
	        data是当前节点的数据 -->
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <span class="table_info_node">
              <span class="table_info_item" style="width: 200">
               <span> {{ data.name }} </span>
                <span v-if="data.pid == 0">
                  【{{ formatDictCode('PT',data.platform) }}】
                </span>
              </span>
              <span class="table_info_item" style="text-align: left">
                {{ data.code }}
              </span>
              <span class="table_info_item" style="text-align: left">
                {{ data.jump }}
              </span>
              <span class="table_info_item" style="text-align: center">
                {{ getTypeName(data.type) }}
              </span>
              <span class="table_info_item" style="text-align: center">
                {{ getStateName(data.status) }}
              </span>
            </span>
          </div>
        </template>
      </el-tree>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'menuTreePop'
}
</script>

<script setup>
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'

import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { formatDictCode } from '@/utils/format.js'
import {
  addRoles,
  editRoles,
  deleteRoles,
  getRolesInfo,
  getRolesList,
  updateRolesBind,
  getRolesBind,
  enableRoles,
  getMenusList
} from '@/api/system'
const emit = defineEmits(['close', 'submitForm'])
const props = defineProps({
  RoleId: String
})

const scrollerHeight = computed(() => {
  return window.innerHeight - 250 + 'px'
})

const prop = ref({
  children: 'children',
  label: 'name',
  id: 'id'
})
const page = reactive({
  name: '',
  code: ''
})

const submitpage = reactive({})
const loading = ref(true)
const rolemenu = ref('')
const rolemenupage = ref({})
const multipleSelection = ref([])
const tableData = ref([])
const treeDataRef = ref()

onMounted(() => {
  getlist()
})

const loadClose = () => {
  console.log('loading', 111)
  loading.value = false
}

defineExpose({
  loadClose
})

/* const setIdNumberToString = data => {
  data.forEach(item => {
    item.id = item.id + ''
    if (item.children && item.children.length > 0) {
      setIdNumberToString(item.children)
    }
  })
  return data
} */

// tree组件渲染的数据列表
const getlist = () => {
  loading.value = true
  rolemenupage.id = props.RoleId
  getMenusList(page)
    .then(res => {
      if (res.succeed) {
        tableData.value = res.data
        getRolesBind(props.RoleId)
          .then(result => {
            nextTick(() => {
              result.data.forEach(element => {
                const node = treeDataRef.value.getNode(element)
                if (node && node.isLeaf) {
                  treeDataRef.value.setChecked(element, true)
                }
              })
            })
            loading.value = false
          })
          .catch(error => {
            loading.value = false
          })
      }
    })
    .catch(err => {
      loading.value = false
    })
}

const getStateName = status => {
  if (status == 1) {
    return '启用'
  } else {
    return '停用'
  }
}

const getTypeName = type => {
  if (type == 1) {
    return '目录'
  } else if (type == 2) {
    return '页面'
  } else {
    return '按钮'
  }
}

const Save = () => {
  loading.value = true
  let res = treeDataRef.value
    .getCheckedKeys()
    .concat(treeDataRef.value.getHalfCheckedKeys())

  submitpage.roleId = props.RoleId
  submitpage.resIds = res.join(',')
  emit('submitForm', submitpage)
}

const handleCheckChange = (curObj, objStatus, indeterminate) => {
  // console.log(
  //   'console.log(data, checked, indeterminate)',
  //   curObj,
  //   objStatus,
  //   indeterminate
  // )
  //let selected = this.$refs.treeData.getCheckedNodes()
  /*   if (objStatus) {
    // 当前节点选中，勾选父节点
    const parentNode = treeDataRef.value.getNode(curObj).parent
    if (parentNode.key !== undefined) {
      treeDataRef.value.setChecked(parentNode, true)
    }
  } else {
    // 当前节点取消选中，所有子节点取消选中
    if (curObj.children !== undefined) {
      curObj.children.forEach((item, i) => {
        treeDataRef.value.setChecked(item, false, true)
      })
    }
  } */
  //console.log(33, selected)
}

const checkChange = (a, b, c) => {
  console.log(a, b, c)
  b ? findchildren(a, b) : ''
}

const findchildren = current => {
  treeDataRef.value.setChecked(current.id, true, true)
  let d = current.children
  if (d.length > 0) {
    d.forEach(a => {
      findchildren(a)
    })
  }
}
</script>

<style scoped lang="scss">
.invoice-list {
  /* border: 1px solid #ebeef5; */
  margin-top: 10px;
}

.el-tree-node__children {
}

.invoice-header {
  background-color: #f4f9ff;
  display: flex;
  padding-left: 0px;
  border-bottom: 1px solid #ebeef5;
}

.invoice-item {
  list-style: none;
  padding: 10px;
  padding-right: 0;
  flex: 1;

  padding-left: 20px;
  list-style: none;
  text-align: center;
}

:deep(.el-tree-node__content) {
  background: #f2f2f2;
  height: 40px;
}

:deep(.el-tree-node__content) {
  background: #fff;
}

.custom-tree-node {
  width: 100%;
  height: 100%;
}

.total_info_box {
  background: #f2f2f2;
  line-height: 40px;

  span {
    float: left;
    font-size: 12px;
    margin: 0 15px;

    i {
      display: inline-block;
      margin-right: 3px;
    }
  }
}

.table_info_node {
  display: flex;
  height: 100%;
}

.table_info_item {
  flex: 1;
  height: 100%;
  padding-left: 10px;
  line-height: 40px;
}
</style>
